<template>
  <div class="login-root">
    <div class="form-container">
      <div style="margin-top: 200px;margin-bottom: 30px;">
        <div class="large-name" :style="'color:' + solarStyle?.firstColor">
          Gu<img src="@/assets/imgs/guardcat/guardcat_logo2.jpg" style="height: 110px;padding-bottom: 10px;">rd
        </div>
        <div class="large-name" :style="'color:' + solarStyle?.secondColor">
          C<img src="@/assets/imgs/guardcat/guardcat_logo.jpg" style="height: 110px;padding-bottom: 10px;">t
        </div>
        <div class="mini-desc">流量, 日志, 服务监控解决方案</div>
      </div>
      <el-form class="login-form" size="large" :model="loginForm" label-width="120px">
        <el-form-item>
          <el-input v-model="loginForm.username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="loginForm.password" placeholder="请输入密码" type="password" />
        </el-form-item>
        <el-form-item class="formitem-shot-line-height" style="line-height: 24px;">
          <el-radio-group size="small" v-model="envName" @change="envChangeHandler">
            <el-radio-button label="LOC" />
            <el-radio-button label="DEV" />
            <el-radio-button label="PRD" />
          </el-radio-group>
          <span style="font-size: 12px;">登录环境：使用非公共接口时切换环境需重新登录.</span>
        </el-form-item>
        <el-form-item class="formitem-between">
          <el-button style="width:45%" type="primary" @click="login">登录</el-button>
          <el-button style="width:45%" @click="loginEscape">免登录</el-button>
        </el-form-item>
        <el-form-item>
          <el-switch style="margin-left: 10px;" inline-prompt v-model="isDark" :active-icon="Moon"
            :inactive-icon="Sunny" />
        </el-form-item>
      </el-form>
    </div>

    <div class="right-container">
      <!-- <img src="@/assets/imgs/wallhaven-e7r67w.jpg" style="height: 100%;object-fit: cover;"> -->
    </div>

  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { Sunny, Moon } from '@element-plus/icons-vue';
import { useDark } from '@vueuse/core';
import { storeToRefs } from 'pinia';
import { useAuthStore } from '@/stores/auth';
import { useEnvStore } from '@/stores/env';
import { getSolorColor } from "@/assets/utils/util";
import type { SolarColor } from "@/assets/utils/util";

const envName = ref<string>('')
const envStore = useEnvStore();
const { env } = storeToRefs(envStore);

const authStore = useAuthStore();
const isDark = useDark();
const loginForm = ref<{ username: string, password: string }>({
  username: 'admin',
  password: '123',
})

const solarStyle = ref<SolarColor>();

const login = () => {
  authStore.loginByPassword(loginForm.value.username, loginForm.value.password);
}

const loginEscape = () => {
  authStore.loginEscape();
}

const envChangeHandler = () => {
  envStore.setEnv(envName.value);
}

const solarColorHandler = () => {
  solarStyle.value = getSolorColor();
}

onMounted(() => {
  envName.value = env.value.envName;
  envChangeHandler();
  authStore.checkToken();
  solarColorHandler();
})


</script>

<style scoped lang="scss">
.login-root {
  @include box(100%, 100%);
  @include flex(row);

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .large-name {
    @include font(150px, 700);
    @include flex(row, flex-end, flex-end);
    line-height: 150px;
    text-align: right;
  }

  .mini-desc {
    text-align: right;
    color: var(--el-color-info);
    font-style: italic;
  }

  .login-form {
    width: 420px;
    margin-top: 20px;
    color: var(--el-color-info);

    .formitem-shot-line-height {
      margin-bottom: 10px;

      :deep(.el-form-item__content) {
        line-height: 23px;
      }
    }

    .formitem-between {

      :deep(.el-form-item__content) {
        justify-content: space-between;
      }
    }
  }

  .form-container {
    @include box(40%, 100%);
    @include flex(column, flex-start, center);
    min-width: 630px;
  }

  .right-container {
    @include box(60%, 100%);
    background-color: var(--el-color-primary-light-5);
    overflow: hidden;
    //设置缩放比例
  }
}
</style>